<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>Radial Tree</title>
  </head>
  
  <body>
    <select id="layout">
      <option value="dendrogram">系统树</option>
      <option value="compactBox">紧凑树</option></select>
    <div id="mountNode"></div>
    <script src="assets/hierarchy.js"></script>
    <script src="../build/g6.js"></script>
    <script src="../build/minimap.js"></script>
    <script src="./assets/jquery-3.2.1.min.js"></script>
    <script>
      let currentLayout = 'dendrogram';
      const layouts = {
        dendrogram: function(data) {
          const result = Hierarchy.dendrogram(data, {
            direction: 'LR',
            // H / V / LR / RL / TB / BT
            nodeSep: 50,
            rankSep: 100
          });
          G6.Util.radialLayout(result);
          return result;
        },
        compactBox: function(data) {
          const result = Hierarchy.compactBox(data, {
            direction: 'LR',
            getId(d) {
              return d.id;
            },
            getHeight() {
              return 16
            },
            getWidth() {
              return 16
            },
            getVGap() {
              return 50
            },
            getHGap() {
              return 50
            }
          });
          G6.Util.radialLayout(result);
          return result;
        }
      };
      const minimap = new Minimap({
        size: [300, 300],
        type: 'delegate'
      });
      const graph = new G6.TreeGraph({
        container: 'mountNode',
        width: 500,
        height: 500,
        pixelRatio: 2,
        plugins: [minimap],
        modes: {
          default: [{
            type: 'collapse-expand',
            onChange(item, collapsed) {
              const data = item.get('model').data;
              data.collapsed = collapsed;
              return true;
            }
          },
          'drag-canvas', 'zoom-canvas']
        },
        defaultNode: {
          style: {
            fill: '#40a9ff',
            stroke: '#096dd9'
          }
        },
        defaultEdge: {
          style: {
            stroke: '#A3B1BF'
          }
        },
        linkCenter: true,
        layout: layouts[currentLayout]
      });
      G6.Global.defaultNode.size = 16;
      $.getJSON('./assets/data/flare.json',
      function(data) {
        G6.Util.traverseTree(data, node => {
          node.id = node.name;
        });
        graph.data(data);
        graph.render();
        graph.fitView();
      });
      document.getElementById('layout').addEventListener('change', e => {
        const layout = e.target.value;
        if (currentLayout !== layout) {
          currentLayout = layout;
          graph.changeLayout(layouts[currentLayout]);
        }
      });
    </script>
  </body>
</html>